<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag !== 0" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <div class="button-group">
        <span>只看开机 </span
        ><el-switch
          v-model="filter"
          active-color="#00f4ff"
          inactive-color="#bbb"
        />
        <el-select v-model="building">
          <el-option
            v-for="(item, index) in option"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="floor">
          <el-option
            v-for="(item, index) in option2"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="elec-trend">
        <div class="elec-trend-title">MAU设备实时状态（开/关）</div>
        <div class="elec-trend-title">历史TCV散点图（%）</div>
        <div class="elec-trend-title">历史TCV散点图（%）</div>
        <div class="elec-trend-title">MAU负荷（kW）/送风量（m³/s）</div>
      </div>
      <div class="view-frame">
        <EnergyCard
          v-for="(item, index) in finalList"
          :key="index"
          :best-machine="bestMachine"
          :time-data="
            timeData ? timeData.find(e => e.machine_id === item.machine_id) : {}
          "
          :current-data="item"
          :computed-data="
            computedData
              ? computedData.find(e => e.machine_id === item.machine_id)
              : {}
          "
          :last7-data="
            last7Data
              ? last7Data.filter(e => e.machine_id === item.machine_id)
              : {}
          "
        />
      </div>
    </div>
  </div>
</template>

<script>
import redisService from "@service/redisRequest.js";
import { mapState } from "vuex";
import "element-ui/lib/theme-chalk/index.css";
export default {
  name: "Edftgyhj",
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
    EnergyCard: () => import("./module/EnergyCard.vue")
    // vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      runFlag: 0,
      filter: false,
      building: null,
      floor: null,
      option: [
        {
          value: "fab",
          label: "FAB"
        },
        {
          value: "mod",
          label: "MOD"
        },
        {
          value: "mc",
          label: "MC"
        }
      ],
      option1: {
        fab: [
          {
            value: "fab-l40",
            label: "L40"
          },
          {
            value: "fab-roof",
            label: "屋面"
          },
          {
            value: "fab-l25",
            label: "传递间"
          }
        ],
        mod: [
          {
            value: "mod-l10",
            label: "L10"
          },
          {
            value: "mod-roof",
            label: "屋面"
          }
        ],
        mc: [
          {
            value: "mc-l40",
            // label: 'L40'
            label: "L10"
          }
        ]
      },
      computedData: [],
      last7Data: [],
      dataList: [],
      machineData: [],
      timeData: [],
      redisService
    };
  },
  computed: {
    ...mapState({
      service: state => state.service,
      webModel: state => state.authentication.webModel,
      treeTemplate: state => state.component.treeTemplate
    }),
    mainTitle() {
      return this.title;
    },
    option2() {
      return this.option1[this.building];
    },
    finalList() {
      if (!this.filter) {
        return this.dataList;
      } else {
        if (this.timeData.length) {
          const currentList = [];
          let e = {};
          this.dataList.forEach((item, index) => {
            e = this.timeData.find(el => el.machine_id === item.machine_id);
            currentList.push({ ...item, value: e.value });
          });
         
          return currentList.filter(
            i => i.value.find(i => i.tag_id === "s").value !== 0
          );
        } else {
          return [];
        }
      }
    },
    bestMachine() {
      if (
        this.timeData.length &&
        this.machineData.length &&
        this.last7Data.length
      ) {
        const building = this.machineData.find(
          e => e.building_id === this.building
        );
        const currentList = [];
        const machine = building.children.find(e => e.id === this.floor)
          .machine;
        let e = {};
        machine.forEach((item, index) => {
          e = this.timeData.find(el => el.machine_id === item.machine_id);
          currentList.push({ ...item, value: e.value });
        });
        const bestMachine = currentList.map(e => {
          const item1 = this.last7Data.find(
            i => i.machine_id === e.machine_id && i.tag_id === "p"
          );
          const item2 = this.last7Data.find(
            i => i.machine_id === e.machine_id && i.tag_id === "iv"
          );
          const value =
            (item2.value[item2.value.length - 1] * e.info.area) /
            item1.value[item1.value.length - 1];
          return item1.value[item1.value.length - 1] ? value : 0;
        });
        if (Math.max(...bestMachine) > 0) {
          const ind = bestMachine.indexOf(Math.max(...bestMachine));
          const id = currentList[ind];
          return id.machine_id;
        } else {
          return "";
        }
      } else {
        return "";
      }
    }
  },
  watch: {
    building(val, oldval) {
      this.floor = this.option2[0].value;
      const building = this.machineData.find(
        e => e.building_id === this.building
      );
      if (building && building.children) {
        const machine = building.children.find(e => e.id === this.floor)
          .machine;
        this.dataList = machine;
      } else {
        this.dataList = [];
      }
    },
    floor(val, oldval) {
      const building = this.machineData.find(
        e => e.building_id === this.building
      );
      if (building && building.children) {
        const machine = building.children.find(e => e.id === this.floor)
          .machine;
        this.dataList = machine;
      } else {
        this.dataList = [];
      }
    }
  },
  created() {
    this.building = "fab";
    this.floor = this.option2[0].value;
    this.init();
    setTimeout(() => {
      this.runFlag = 0;
    }, 100000);
  },
  mounted() {},
  methods: {
    async getEmsBuildingMachine() {
      this.runFlag = 1;
      const result1 = await this.service.getEmsBuildingMachine();
      if (!result1 || !result1.data) {
        this.$notify({
          title: "楼层设备信息获取失败",
          type: "error",
          duration: 2500
        });
        this.runFlag = 0;
        return;
      }
      this.machineData = result1.data;
      // console.log(this.machineData,'')
      const building = this.machineData.find(
        e => e.building_id === this.building
      );
      if (building && building.children) {
        const machine = building.children.find(e => e.id === this.floor)
          .machine;
        this.dataList = machine;
      } else {
        this.dataList = [];
      }
      this.runFlag = 0;
    },
    async getEmsMAUComputedData() {
      this.runFlag = 1;
      const result2 = await this.service.getEmsMAUComputedData();
      if (!result2 || !result2.data) {
        this.$notify({
          title: "COP数据获取失败",
          type: "error",
          duration: 2500
        });
        this.runFlag = 0;
        return;
      }
      this.computedData = result2.data[0].data;
      this.runFlag = 0;
    },
    async getEmsMAULast7Data() {
      this.runFlag = 1;
      const result3 = await this.service.getEmsMAULast7Data();
      if (!result3 || !result3.data) {
        this.$notify({
          title: "阀门开度数据获取失败",
          type: "error",
          duration: 2500
        });
        this.runFlag = 0;
        return;
      }
      this.last7Data = result3.data;
      this.runFlag = 0;
    },
    async getMAUCurrentData() {
      this.runFlag = 1;
      const result4 = await this.service.getMAUCurrentData();
      if (!result4 || !result4.data) {
        this.$notify({
          title: "阀门开度数据获取失败",
          type: "error",
          duration: 2500
        });
        this.runFlag = 0;
        return;
      }
      this.timeData = result4.data;
      this.runFlag = 0;
    },
    async init() {
      this.getEmsBuildingMachine();
      this.getEmsMAUComputedData();
      this.getEmsMAULast7Data();
      this.getMAUCurrentData();
    }
  }
};
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.mainbody {
  height: 100vh;
  background: url("~@assets/report/leftbg.jpg") no-repeat;
  background-size: 100% 100%;
}
.container {
  position: relative;
  width: 95%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
.view-frame {
  display: flex;
  flex-flow: column nowrap;
  height: 78%;
  justify-content: flex-start !important;
  overflow-y: scroll;
  // margin-top: 1rem;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    // 兼容Chrome
    display: none;
  }
  &::-o-scrollbar {
    // 兼容Opera
    display: none;
  }
  scrollbar-width: none; // 兼容Firefox
  -ms-overflow-style: none; // 兼容edge
}
.button-group {
  position: absolute;
  top: 3% !important;
  right: 0;
}

.button-group > span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-size: 1.2rem;
  margin: 0 0.3rem;
}
.button-group span .el-input__icon {
  line-height: 3rem;
}
.elec-trend {
  display: flex;
  height: 3rem;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  margin: 1rem 0;
}
.elec-trend-title {
  flex-basis: 25%;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 3rem;
}
</style>
<style>
.button-group .el-input--suffix .el-input__inner {
  width: 9rem;
  height: 3rem;
  background: transparent;
  border: 1.5px solid rgba(233, 232, 232, 0.5);
  border-radius: 0;
  padding-left: 1rem;
  margin-left: 1rem;
  color: #fff;
  font-weight: 600;
}
.button-group span .el-input__icon {
  line-height: 3rem;
}
</style>
